<template>
  <div class="wrapper">
    <header>
      <p>用户登录</p>
    </header>
    <ul class="form-box">
      <li>
        <div class="title">手机号码：</div>
        <div class="content">
          <input v-model="formData.phone" type="text" placeholder="手机号码">
        </div>
      </li>
      <li>
        <div class="title">密码：</div>
        <div class="content">
          <input v-model="formData.password" type="password" placeholder="密码">
        </div>
      </li>
    </ul>

    <div class="button-login">
      <button @click="goToPage('zhuce')"><i class="fa fa-home>"><p>登录</p></i></button>
    </div>
    <div class="button-login">
      <button @click="handleRegister">去注册</button>
    </div>

    <!-- 底部菜单部分 -->
    <ul class="footer">
      <li @click="goToPage">
        <i class="fa fa-home"></i>
        <p>首页</p>
      </li>
      <li @click="goToPage">
        <i class="fa fa-compass"></i>
        <p>发现</p>
      </li>
      <li @click="goToPage">
        <i class="fa fa-file-text-o"></i>
        <p>订单</p>
      </li>
      <li @click="goToPage">
        <i class="fa fa-user-o"></i>
        <p>我的</p>
      </li>
    </ul>
  </div>
</template>

<script >
export default {
  data() {
    return {
      formData: {
        phone: '',
        password: '',
        confirmPassword: '',
        username: '',
        gender: 'male'
      }
    }
  },
  methods: {
    handleRegister() {
      // 在这里添加注册逻辑
      console.log('注册信息:', this.formData)
      // 跳转到登录页
      this.$router.push('/Register')
    },
    goToPage(path) {
      this.$router.push(`/${path}`)
    }
  }
}
</script>

<style>
@import url('../framework/font-awesome/css/font-awesome.min.css');
@import url('../framework/reset.css');
@import url('../css/login.css');
</style>